<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <meta name="keywords" content="">
  <title>护照申请表格</title>
  <script type="text/javascript" src="${ctx}/static/js/jsAddress.js"></script>
  <link rel="stylesheet" href="${ctx}/static/passport/assets/css/bootstrap.min.css">
  <link rel="stylesheet" href="${ctx}/static/passport/assets/css/build_standalone.less">
  <link rel="stylesheet" href="${ctx}/static/passport/css/reset.css">
  <link rel="stylesheet" href="${ctx}/static/passport/css/common.css">
  <link rel="stylesheet" href="${ctx}/static/passport/css/approvallist.css">
  <link rel="stylesheet" href="${ctx}/static/passport/css/approvallist_bootstrap.css">
  <script type="text/javascript" src='${ctx}/static/passport/assets/js/jquery.min.js'></script>
  <link href="${ctx}/static/datetimepicker/bootstrap/css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
  <script type="text/javascript" src="${ctx}/static/datetimepicker/jquery/bootstrap-datetimepicker.js" charset="UTF-8"></script>
  <script type="text/javascript" src="${ctx}/static/datetimepicker/jquery/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
  <script type="text/javascript" src='${ctx}/static/passport/assets/js/bootstrap.min.js'></script>
  <script type="text/javascript" src='${ctx}/static/passport/js/applicationprocess.js'></script>
  <link href="${ctx}/static/jquery-validation/1.11.1/validate.css" type="text/css" rel="stylesheet"/>
  <script src="${ctx}/static/jquery-validation/1.11.1/jquery.validate.min.js"></script>
  <script src="${ctx}/static/jquery-validation/1.11.1/messages_bs_zh.js"></script>
  <script>
      var number=1;/*用于确认是否为第一次选择区域，不讲其他的日期可见*/


    $().ready(function() {

        //初始化将控件隐藏
        $(".appiontmentdate_hint").hide();

      // 在键盘按下并释放及提交后验证提交表单
      $("#inputForm").validate({
        //debug:true,
        rules: {
          appointmentTime: "required",
          cmbArea: "required",
          bassAddressId: "required",
          datetimepicker: "required",
          timelist: "required"
        },
        messages: {
          appointmentTime: "请选择预约日期",
          cmbArea: "请选择区县",
          bassAddressId: "请选择预约基地",
          datetimepicker: "请选预约日期",
          timelist: "请选择时间段"
        }
      });

    });

    function findBaseAddress()
    {
//        alert("hahaha");
      var area = $("#cmbArea").val();
      if("请选择" == area)
      {
        alert("请选择区县");
        return;
      }
      var url = "${ctx}/passportApply/findAddress/"+area;
      var html = "";
      $.getJSON(url,function(result){
        if(result.code  == 0)
        {
          if(result.data.length>0)
          {
//              alert("有数据");
              html+='<option value="请选择基地">请选择基地</option>';
            for (var i = 0; i < result.data.length; i++) {
              html += '<option value="' + result.data[i].id + '">' + result.data[i].name + '</option>';
            }

//                alert("取消隐藏");
                $('#bassAddressId').removeAttr("disabled");

                $("#appointmenDate").attr({"disabled":"disabled"});
                $("#appointmentTime").attr({"disabled":"disabled"});

          }else
          {
//              alert("没数据");
              html+= '<option value="0">该区暂无可预约基地</option>';


            /*将日期与时间段给禁止*/
              $("#bassAddressId").attr({"disabled":"disabled"});
              $("#appointmenDate").attr({"disabled":"disabled"});
              $("#appointmentTime").attr({"disabled":"disabled"});
          }

        }

        /*没有选择基地不能提交*/
        $("#submitbtn").attr({"disabled":"disabled"});

        $('#bassAddressId').html(html);

        /*清空数据*/
          $("#appointmenDate").val("");
          $("#appointmentTime").html("");


          /*根据是否有预约时间隐藏*/
          $(".appiontmentdate_hint").hide();
          $(".appiontmentdate_warpper").show();
      });
    }

    function selectDay()
    {

      var bassAddressId = $("#bassAddressId").val();

        if("请选择基地" == bassAddressId)
        {
            alert("请选择基地");

            return;
        }

      var url = "${ctx}/passportApply/findAddressAppointTime/"+bassAddressId;
      var html ="";
      var dtst = new Date($("#appointmenDate").val());
      var month=dtst.getMonth()+1;
      if(month>0 && month<10)
      {
          month="0" +month;
      }
      var day = dtst.getDate();
      if(day>0&&day<10){
          day="0"+day;
      }
      var dt = dtst.getFullYear()+'-'+month+'-'+day;
      $.getJSON(url,function(result){
        if(result.code  == 0)
        {
          if(result.data.length >0)
          {
//              console.log(result);
              if("请选择基地" == bassAddressId){
                /*没有选择基地不能提交*/
                  $("#submitbtn").attr({"disabled":"disabled"});
              }


            for (var i=0;i<result.data.length;i++)
            {
              var day = result.data[i].day;
              var datetimes = result.data[i].times;

//              console.log(day+"___"+dt);
              if (day == dt) {
                for (var n=0;n<datetimes.length;n++) {
//                    alert(datetimes[n]);
                  html += '<option>'+datetimes[n]+'</option>';
                }
              }
            }

              $('#submitbtn').removeAttr("disabled");
              $('#appointmenDate').removeAttr("disabled");
              $('#appointmentTime').removeAttr("disabled");

              /*根据是否有预约时间隐藏*/
              $(".appiontmentdate_warpper").show();
              $(".appiontmentdate_hint").hide();


          }else{ //传过来的无可预约日期

//              /*清空数据*/
              var mydate = new Date();
              var mynewdate = new Date(mydate);
              mynewdate.setDate(mydate.getDate()+11);
//              alert(mynewdate+"第一次时间");
              var seperator1 = "-";
              var year = mynewdate.getFullYear();
              var month = mynewdate.getMonth() + 1;
              var strDate = mynewdate.getDate();

              if(year<=2017 && month<=1 &&strDate<=15){
                year=2017;
                month=1;
                strDate=15;
              }

              if (month >= 1 && month <= 9) {
                  month = "0" + month;
              }
              if (strDate >= 0 && strDate <= 9) {
                  strDate = "0" + strDate;
              }
              var currentdate = year + seperator1 + month + seperator1 + strDate;

//              alert(currentdate+"第二次时间");



              //追加默认时间
              $('#appointmenDate').removeAttr("disabled");
              $('#appointmentTime').removeAttr("disabled");

              $("#appointmenDate").val(currentdate);
              html= '<option>08:00-09:00</option>';


//              alert($("#appointmenDate").val()+"__");
//              alert($("#appointmentTime").html()+"__");

              $(".appiontmentdate_warpper").hide();
              $(".appiontmentdate_hint").show();

              $('#submitbtn').removeAttr("disabled");

          }
          document.getElementById('appointmentTime').innerHTML = html;
//          alert(html)
        }
      });
    }
  </script>
</head>

<body>
<div class='common_header_wrapper'>
  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="javascript:;">公益护照申请表</a>
      </div>
      <!--
      <div class='common_headeruserinfo_wrapper'>
                    <span class='avatar'>
                       <img src="${ctx}/static/passport/img/timg.jpg">
                    </span>
        <label>申请人</label>
        -->
      </div>
    </div>
  </nav>
</div>
<div class="container-fluid">
  <div class="row">
    <div class="common_process_wrapper main">
      <form id="inputForm" class="passport_pickdate_wrapper form-horizontal" role="form" action="${ctx}/passportApply/save" method="post">

        <div class="form-group col-lg-12">
            <label class="col-lg-2 control-label">区域选择</label>
            <div class="col-lg-3 col-lg-10">
              <select class="form-control" id="cmbProvince" name="cmbProvince" disabled></select>
            </div>
            <div class="col-lg-3 col-lg-10" style="display: none;">
              <select class="form-control" id="cmbCity" name="cmbCity"></select>
            </div>
            <div class="col-lg-3 col-lg-10">
              <select class="form-control" id="cmbArea" name="cmbArea" onchange="javascript:findBaseAddress();" required="required"></select>
            </div>
            <script type="text/javascript">
              addressInit('cmbProvince', 'cmbCity', 'cmbArea', '上海市', '上海市', '');
            </script>
        </div>

        <div class="form-group col-lg-12" id="address_div">
          <label class="col-lg-2 control-label">预约基地</label>
          <div class="col-lg-9 col-lg-10">
            <select class="form-control" id="bassAddressId" name="bassAddressId" required="required" onchange="javascript:selectDay();"></select>
        </div>
        </div>
        <div class="appiontmentdate_warpper form-group col-lg-12">
          <label class="col-lg-2 control-label">预约日期</label>
            <div class="col-lg-3">
            <input class='form-control' name="appointmenDate" type="text" value="" required=" " id="appointmenDate" onchange="javascript:selectDay();">
          </div>
          <label class="col-lg-2 control-label">时间段</label>
          <div class="col-lg-4">
            <select class="form-control" name="appointmentTime" id="appointmentTime" required=""></select>
          </div>
        </div>
        <%--无时间的时候将--%>
        <div class="appiontmentdate_hint col-lg-12">
          &nbsp;&nbsp;&nbsp;&nbsp;请于“T+11”之后的工作日至基地现场取证
        </div>
        <div class="form-group summitbtn">
          <div class="col-lg-offset-1 col-lg-10">
            <button type="submit" id="submitbtn" class="btn btn-primary btn-lg btn-block">提交</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
<script>
  var date = new Date();
  var staDate = new Date(date);
  var enDate = new Date(date);
  staDate.setDate(date.getDate() + 5);
  enDate.setDate(date.getDate() + 10);

  $('#appointmenDate').datetimepicker({
    format: 'yyyy-mm-dd',
    minView: 2,
    language: 'zh-CN',
    autoclose: true,
    todayHighlight: true,
    forceParse: false,
    startDate: new Date(staDate),
    endDate: new Date(enDate)
  });

</script>
</body>
</html>


